<template>
  <el-dialog title="应用配置" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false" :before-close="closeHandler">
    <el-card class="box-card">
      <el-form ref="RefForm" :model="formData" label-width="90px" status-icon>
        <div class="divForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户端名称">
                <el-input v-model="formData.name" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="视频监控" name="video">
          <el-form v-show="isShowAddForm" ref="Addform" :model="AddForm" label-width="100px">
            <el-row>
              <!-- <el-col :lg="6" :sm="12" :xs="24"> -->
              <el-form-item label="设备名称">
                <el-input v-model="AddForm.name" />
              </el-form-item>
              <!-- </el-col>
              <el-col :lg="6" :sm="12" :xs="24">-->
              <!-- <el-form-item label="所在区域">
                <el-select v-model="AddForm.areaId" placeholder>
                  <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>-->
              <!-- </el-col>
              <el-col :lg="6" :sm="12" :xs="24">-->
              <el-form-item label="主码流地址">
                <el-input v-model="AddForm.urlServer" />
              </el-form-item>
              <!-- </el-col>
              <el-col :lg="6" :sm="12" :xs="24">-->
              <el-form-item label="子码流地址">
                <el-input v-model="AddForm.subUrlServer" />
              </el-form-item>
              <!-- </el-col> -->
            </el-row>
            <el-row>
              <el-form-item>
                <el-button type="primary" @click="sure">确定</el-button>
                <el-button plain @click="cancel">取消</el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="安全帽监测" name="safecat">
          <div class="card">
            <el-card class="box-card">
              安全帽监测抓拍图片保存期限：
              <el-input v-model="keepDays" style="max-width: 200px" />
              <span style="display: inline-block; margin-left: 10px">天</span>
              <span style="color: red; display: inline-block; margin-left: 10px">*系统默认图片保存期限为5天</span>
              <el-button v-if="keepDays" type="primary" style="display: block" :loading="loading" @click="submitHan">确定</el-button>
            </el-card>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <ListTable v-if="activeName === 'video'" ref="RefDetailsTableList" :page="true" :loading="tableLoading" :table-data="tableData" :table-col="tableCol">
      <template slot="col1" slot-scope="scope">
        <el-button icon="el-icon-edit" :loading="scope.row.loadingEdit" size="mini" type="text" @click="handleRowEdit(scope.row)">编辑</el-button>
        <el-button :loading="scope.row.loadingDel" size="mini" icon="el-icon-delete" style="color: red" type="text" @click="handleRowDel(scope.row)">删除</el-button>
      </template>
    </ListTable>
  </el-dialog>
</template>

<script>
import dialogEditMixin from '@/mixins/dialogEdit'
import listMixin from '@/mixins/list'
import { VideoSearch, Video } from '@/api/video'
import { safetyCatSetting } from '@/api/api'
export default {
  mixins: [dialogEditMixin, listMixin],
  data() {
    return {
      loading: false,
      id: 0,
      // 安全帽抓拍图片保存时间
      keepDays: '5',
      activeName: 'video',
      formData: {
        attendanceType: '',
        accessCardID: '',
        name: '',
        tenantCode: '',
        rfid: ''
      },
      videoId: '',
      tableCol: [
        { prop: 'name', label: '设备名称', minWidth: '100px' },
        { prop: 'area.name', label: '所在区域', minWidth: '100px' },
        { prop: 'urlServer', label: '主码流地址', minWidth: '100px' },
        { prop: 'subUrlServer', label: '子码流地址', minWidth: '100px' },
        { label: '操作', custom: 'col1', minWidth: '100px' }
      ],
      AddForm: {
        name: '',
        urlServer: '',
        areaId: '',
        subUrlServer: ''
      },
      isShowAddForm: false,
      tableData: []
    }
  },
  watch: {
    // dialogVisible(newVal, oldVal) {
    //   if (newVal) {
    //   }
    // },
    // 点击tab
    activeName: function (newValue, oldValue) {
      if (newValue === 'safecat') {
        this.getSafecat()
      } else {
        this.getVideo()
      }
    }
  },
  methods: {
    // 打开弹窗
    openHandler(value) {
      this.dialogVisible = true
      this.formData.name = value.tenantName
      this.formData.tenantCode = value.code
      this.getVideo()
    },
    // 查询安全帽天数
    async getSafecat() {
      var that = this
      try {
        const response = await safetyCatSetting('POST', {
          pageIndex: 1,
          pageSize: 10,
          tenant: that.formData.tenantCode
        })
        if (response.data.items.length > 0) {
          this.keepDays = response.data.items[0].keepDays
          this.id = response.data.items[0].id
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 编辑视频监控
    async sure() {
      try {
        const obj = {
          id: this.videoId,
          code: 'tenant=' + this.formData.tenantCode,
          value: this.AddForm
        }
        const {
          data: { success }
        } = await Video('PUT', obj)
        if (success) {
          this.$message.success('编辑成功！')
          this.AddForm = {
            name: '',
            urlServer: '',
            subUrlServer: ''
          }
          this.videoId = ''
          this.getVideo()
          this.cancel()
        }
      } catch (err) {
        this.$message.error('编辑失败！')
        console.log(err)
      }
    },
    // 查询视频监控
    async getVideo(query) {
      this.tableData = []
      try {
        const obj = query || {
          pageIndex: 1,
          pageSize: 10
        }
        const {
          data: { items, pageIndex, count }
        } = await VideoSearch(obj, 'tenant=' + this.formData.tenantCode)
        this.tableData = items
        this.$nextTick(() => {
          this.$refs['RefDetailsTableList'].update({ page: pageIndex, count })
          this.tableLoading = false
        })
      } catch (err) {
        console.log(err)
      }
    },
    resetFormData() {
      this.formData = {
        attendanceType: '',
        accessCardID: '',
        name: '',
        rfid: ''
      }
    },
    // 保存安全帽监测天数
    async submitHan() {
      var that = this
      this.loading = true
      try {
        const obj = {
          id: this.id,
          tenant: that.formData.tenantCode,
          value: { keepDays: this.keepDays }
        }
        await safetyCatSetting('PUT', obj)
        this.$message.success('设置成功！')
        this.getSafecat()
      } catch (err) {
        this.$message.error('设置失败！')
        console.log(err)
      }
      this.loading = false
    },
    // 编辑
    handleRowEdit(value) {
      this.AddForm = {
        name: value.name,
        areaId: value.areaId,
        urlServer: value.urlServer,
        subUrlServer: value.subUrlServer
      }
      this.videoId = value.id
      this.isShowAddForm = true
    },
    // 关闭编辑部分
    cancel() {
      this.keepDays = ''
      this.activeName = 'video'
      this.AddForm = {
        name: '',
        urlServer: '',
        subUrlServer: ''
      }
      this.videoId = ''
      this.isShowAddForm = false
    },
    closeHandler() {
      this.cancel()
      this.close()
    },
    async delRowReq(row) {
      try {
        const obj = { id: row.id, code: 'tenant=' + this.formData.tenantCode }
        await Video('delete', obj)
        this.getVideo()
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      } catch (err) {
        this.$message({
          type: 'error',
          message: '删除失败'
        })
        console.error('handleRowDel err: ', err)
      }
    },
    handleRowDel(row) {
      row.loadingDel = true
      this.$_delConfirm(
        '该视频监控',
        () => {
          this.delRowReq(row)
        },
        () => {
          row.loadingDel = false
        }
      )
    }
  }
}
</script>

<style lang='scss' scoped>
  ::v-deep .el-card__body {
    margin: 0 auto;
  }
  .limitTime {
    margin: 0 10px;
  }
  .el-input {
    width: 600px;
  }
  .el-select {
    width: 600px;
  }
  .el-card__body {
    width: 100%;
  }
</style>
